import {Button, Form, Image, Input, Modal, Radio, Space, Upload, message} from "antd";
import ImgCrop from "antd-img-crop";
import {useEffect, useState} from "react";
import http from "../../../../utils/http";

const EditModal = (props) => {
    let data = props.thisData;
    let visibleModal = props.visibleModal;
    let propData = JSON.parse(JSON.stringify(props.editData));
    let initData = {
        name:'',
        photo:'',
        url:'',
        state:'',
        sort:''
    };
    const [cropImg,setCropImg] = useState([]);
    const [previewVisible,setPreviewVisible] = useState(false);
    const [previewImg,setPreviewImg] = useState('');
    const [editData,setEditData] = useState({name:'',
        photo:'',
        url:'',
        state:'',
        sort:''});
    let name = editData.name;
    let state = editData.state;
    let sort = editData.sort;
    let url = editData.url;
    useEffect(()=>{
        if (props.editData.photo){
            setCropImg([
                {
                    uid:'1',
                    name:'image.jpg',
                    status:'done',
                    url:props.image
                }
            ])
            setEditData(propData);
        }
    },[props])

    const [form] = Form.useForm();
    if(propData.name){
        form.setFieldsValue(editData)
    }else {
        form.setFieldsValue(initData);
    }

    const imgCrop = props.imgCropStyle;
    //关闭弹框
    const closeModal = (ev)=> {
        props.changeVisible(false);
        setCropImg([]);
        form.setFieldsValue(initData);
    }
    //添加
    const submitModal = ()=> {
        if(props.type == 'swiper'){
            http({
                url:'api/diyController/bannerAdd',
                method:'post',
                data:editData
            }).then(res=>{
                console.log(res)
                if(res.code == 200){
                    setCropImg([]);
                    message.success('添加成功');
                    props.changeVisible(false);
                    data.push(editData);
                    props.onData(props.type,data);
                }else {
                    message.warning(res.msg);
                }
            }).catch(err=>{
                console.log(err)
            })
        }else if(props.type == 'menu'){
            http({
                url:'api/diyController/controlTableAdd',
                method:'post',
                data:editData
            }).then(res=>{
                console.log(res)
                if(res.code == 200){
                    setCropImg([]);
                    message.success('添加成功');
                    props.changeVisible(false);
                    data.push(editData);
                    props.onData(props.type,data);
                }else {
                    message.warning(res.msg);
                }
            }).catch(err=>{
                console.log(err)
            })
        }
    }
    //修改
    const editModal = ()=> {
        if(props.type == 'swiper'){
            http({
                url:'api/diyController/bannerUpdate',
                method:'post',
                data: editData
            }).then(res=>{
                console.log(res)
                if(res.code == 200){
                    setCropImg([]);
                    message.success('添加成功');
                    props.changeVisible(false);
                    props.onData()
                }else {
                    message.warning(res.msg);
                }
            }).catch(err=>{
                console.log(err)
            })
        }else if(props.type == 'menu'){
            http({
                url:'api/diyController/controlTableUpdate',
                method:'post',
                data: editData
            }).then(res=>{
                console.log(res)
                if(res.code == 200){
                    setCropImg([]);
                    message.success('添加成功');
                    props.changeVisible(false);
                    props.onData()
                }else {
                    message.warning(res.msg);
                }
            }).catch(err=>{
                console.log(err)
            })
        }

        console.log('修改',editData);
    }
    //添加图片是调用
    const onChange = (ev) => {
        setCropImg(ev.fileList);
        console.log(ev.fileList[0])
        if(ev.fileList[0].status == 'uploading'){
            form.setFieldsValue(editData);
        }
        if(ev.fileList[0].status == 'done'){
            editData.photo = ev.fileList[0].response.relativePath;
            editData.name = name;
            editData.state = state;
            editData.sort = sort;
            editData.url = url;
            console.log(editData)
            form.setFieldsValue(editData);
        }
    };

    const onPreview = async file => {
        setPreviewImg(file.url);
        name = editData.name;
        state = editData.state;
        sort = editData.sort;
        url = editData.url;
        setPreviewVisible(true);
    };

    const handleCancel = ()=>{
        setPreviewVisible(false)
    }

    return (
        <div>
            <Modal className={'edit-modal-submit'}
                   title="新增/修改"
                   getContainer={false}
                   visible={visibleModal}
                   footer={[
                        <Button key="back" onClick={closeModal}>
                            取消
                        </Button>,
                        <Button key="submit" style={{background:'black',color:'white'}} onClick={props.editData.name?editModal:submitModal}>
                            {props.editData.name?'修改':'新增'}
                        </Button>
                    ]}
                   onCancel={closeModal}>
                <Form labelCol={{ span: 4 }} wrapperCol={{ span: 20 }} form={form} initialValues={editData}>
                    <Form.Item
                        label="名称"
                        name="name"
                        rules={[{ required: true, message: '请输入区块名！' }]}
                    >
                        <Input placeholder={'请输入区块链接名称'} value={editData.name} onChange={(ev)=>{editData.name = ev.target.value;console.log(editData)}} />
                    </Form.Item>
                    <Form.Item
                        label="区块链接"
                        name="url"
                        rules={[{ required: true, message: '请输入区块链接路径！' }]}
                    >
                        <Input placeholder={'请输入区块链接路径'} value={editData.url} onChange={(ev)=>{editData.url = ev.target.value;console.log(editData)}} />
                    </Form.Item>
                    <Form.Item
                        label="排序"
                        name="sort"
                        rules={[{ required: true, message: '请输入区块排序！' }]}
                    >
                        <Input type={'number'} placeholder={'自定义排序'} value={editData.sort} onChange={(ev)=>{editData.sort = ev.target.value;console.log(editData)}} />
                    </Form.Item>
                    <Form.Item
                        label="图片"
                        name="photo"
                        rules={[{ required: true, message: '请输入区块图片！' }]}
                    >
                        <Space direction="vertical" size={'middle'} style={{width:'100%'}}>
                            <ImgCrop {...imgCrop}>
                                <Upload
                                    action="/api/uploadFile/oss" /*上传地址*/
                                    listType="picture-card"
                                    fileList={cropImg}
                                    maxCount={1}
                                    onChange={onChange}
                                    onPreview={onPreview}
                                >
                                    {cropImg.length ? cropImg.length < 2 && '+ 上传图片' : '+ 上传图片'}
                                </Upload>
                            </ImgCrop>
                        </Space>
                        <Modal
                            visible={previewVisible}
                            title={'查看图片'}
                            footer={null}
                            onCancel={handleCancel}
                        >
                            <img alt="example" style={{ width: '100%' }} src={previewImg} />
                        </Modal>
                    </Form.Item>
                    <Form.Item
                        label="状态"
                        name="state"
                        rules={[{ required: true, message: '请选择状态！' }]}
                    >
                        <Radio.Group value={editData.state} style={{justifyContent:'normal'}} onChange={(ev)=>{editData.state = ev.target.value;console.log(editData)}} >
                            <Radio value={1}>启用</Radio>
                            <Radio value={0}>禁用</Radio>
                        </Radio.Group>
                    </Form.Item>
                </Form>
            </Modal>
        </div>
    )
}

export default EditModal;